<!--电影搜索栏-->
<template>
  <div>
    <!--电影顶部搜索栏-->
    <movie-first-search
        ref="movieSearch"
        class="first-search-style"
        @searchByMovieName="searchByMovieName"
        @search-data="getSearchData"/>
    <!--电影搜索列表-->
    <movie-search-list
        class="search-style-list"
        v-if="searchData.length > 0"
        :be-on-status="searchParams.beOnStatus"
        :movie-list="searchData"/>
    <!--电影分页列表-->
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="Number(pageIndex)"
        :page-sizes="[30, 60, 90, 120]"
        :page-size="Number(pageSize)"
        :total="Number(totalNumber)"
        layout="total, sizes, prev, pager, next, jumper"/>
  </div>
</template>

<script>
import MovieFirstSearch from "@/views/movie/movie_list/movie_first_search/MovieFirstSearch";
import MovieSearchList from "@/views/movie/movie_list/movie_search_list/MovieSearchList";

export default {
  name: "movieList",
  components: {
    MovieFirstSearch,
    MovieSearchList,
  },
  data() {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 30,
      totalNumber: 0,
      searchParams: {
        //电影名字
        movieName: '',
        //页数
        pageNum: 1,
        //每页条数
        size: 30,
        //电影类型
        typeId: null,
        //所属国家
        countryId: null,
        //所属年代
        year: null,
        //排序：0 票房
        sort: 0,
        //上映状态：1 正在热映
        beOnStatus: 1,
      },
      searchData: [],
      beOnStatusFromIndex: 0
    }
  },
  //进入组件前
  beforeRouteEnter(to, from, next) {
    if (to.params.beOnStatus !== undefined) {
      next(vm => {
        vm.beOnStatusFromIndex = to.params.beOnStatus
      })
    } else {
      next()
    }
  },
  //挂载时
  mounted() {
    if (this.beOnStatusFromIndex === 0) {
      this.getDataList(this.searchParams)
    } else {
      this.$refs.movieSearch.queryByBeOnStatus(this.beOnStatusFromIndex)
    }
  },
  methods: {
    //模糊查询
    searchByMovieName(input) {
      this.searchParams.movieName = input;
      this.getDataList(this.searchParams)
    },

    // 获取搜索框数据列表
    getSearchData(data) {
      //每次查找都从第一页开始查找
      this.pageIndex = 1
      this.searchParams.typeId = data.typeId
      this.searchParams.countryId = data.countryId
      this.searchParams.year = data.year
      this.searchParams.beOnStatus = data.beOnStatus
      this.searchParams.sort = data.sort
      this.searchParams.pageNum = 1
      this.getDataList(this.searchParams)
    },
    //获取所有符合条件的电影列表
    getDataList(params) {
      this.$http({
        url: '/es/movie/index',
        method: 'get',
        params: this.$http.adornParams(params)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.searchData = data.data
          if (this.searchData.length > 0) {
            this.totalNumber = this.searchData[0].totalItems
          } else {
            //如果没查到数据 就让 总条数为0
            this.totalNumber = 0
          }
        }
      })
    },
    // 每页条数变化
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList(this.searchParams)
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.searchParams.pageNum = val
      this.getDataList(this.searchParams)
    },
  },
}
</script>

<style scoped>

.search-style-list {
  margin: 20px 200px 40px;
}

.el-pagination {
  text-align: center;
}
</style>
